<template>
  <div class="box" id="box">
    <div class="matter">
      <div class="f1"></div>
    </div>
    <div class="boxs">
      <!-- 面包屑 -->
      <div class="breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
          <img class="icon" src="@/assets/authentication/组6-6.png" alt="" />
          <el-breadcrumb-item>
            <span class="span">用户中心</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-if="index == '2-1' || index == '2-2'">
            <span class="span" style="color: #666">项目管理</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-if="index == '3-1' || index == '3-2'">
            <span class="span" style="color: #666">商务信用管理</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span class="span" style="color: #666">{{ breadcrumbItem }}</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-if="shouXinitem">
            <span class="span" style="color: #666">授信详情</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-if="YongXinItem">
            <span class="span" style="color: #666">用信详情</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
        <span class="back" @click="goBack" v-show="!shouXinitem && !YongXinItem">
          <img src="@/assets/icon/组131.png" alt="" />返回上一页
        </span>
      </div>
      <div class="top">
        <div class="topLeft">
          <img src="@/assets/image/首页0822/组92.png" alt="" />
          <div class="userinfo">
            <h5>{{ userPhone }}</h5>
            <h6  v-if="entname != 'null'">{{ entname }}</h6>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="content_left">
          <div class="menu">
            <el-menu :default-active="index" class="el-menu-vertical-demo">
              <el-submenu index="1">
                <template slot="title">
                  <img src="@/assets/icon/策略管理.png" alt="" />
                  <span>平台认证</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-1" @click="goAuthentication">平台认证</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <template v-if="coopid !== 'null' && coopid !== null && coopid !== 'undefined'">
                <el-submenu index="2">
                  <template slot="title">
                    <img src="@/assets/icon/管理2.png" alt="" />
                    <span>项目管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="2-1" @click="goProjectShangPiao">授信管理</el-menu-item>
                    <el-menu-item index="2-2" @click="goProjectKuaJing">用信管理</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                  <template slot="title">
                    <img src="@/assets/icon/管理2.png" alt="" />
                    <span>商务信用管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="3-1" @click="goMyReport">商务信用报告</el-menu-item>
                    <el-menu-item index="3-2" @click="goSweepRecord">企业风险扫描</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </template>
            </el-menu>
          </div>
        </div>
        <div class="content_right">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      breadcrumbItem: '平台认证',
      userPhone: '',
      index: '1-1',
      shouXinitem: false,
      YongXinItem: false,
      entname: sessionStorage.getItem('entname'),
      userPhone: sessionStorage.getItem('userPhone'),
      coopid: sessionStorage.getItem('coopid')
    }
  },
  mounted() {
    this.updataActive()
  },
  methods: {
    goAuthentication() {
      if (this.$route.path == '/platform') return
      localStorage.clear()
      this.$router.push('/platform')
      this.index = '1-1'
      this.breadcrumbItem = '平台认证'
      this.shouXinitem = false
      this.YongXinItem = false
    },
    goProjectShangPiao() {
      if (this.$route.path == '/projectShangPiao') return
      localStorage.clear()
      this.$router.push('/projectShangPiao')
      this.index = '2-1'
      this.breadcrumbItem = '授信管理'
      this.shouXinitem = false
      this.YongXinItem = false
    },
    goProjectKuaJing() {
      if (this.$route.path == '/projectKuaJing') return
      localStorage.clear()
      this.$router.push('/projectKuaJing')
      this.index = '2-2'
      this.breadcrumbItem = '用信管理'
      this.shouXinitem = false
      this.YongXinItem = false
    },
    // 信用报告
    goMyReport() {
      if (this.$route.path == '/myReport') return
      localStorage.clear()
      this.$router.push('/myReport')
      this.index = '3-1'
      this.breadcrumbItem = '商务信用报告'
      this.shouXinitem = false
      this.YongXinItem = false
    },
    // 风险扫描
    goSweepRecord() {
      if (this.$route.path == '/sweepRecord') return
      localStorage.clear()
      this.$router.push('/sweepRecord')
      this.index = '3-2'
      this.breadcrumbItem = '企业风险扫描'
      this.shouXinitem = false
      this.YongXinItem = false
    },
    updataActive() {
      if (this.$route.path == '/projectShangPiao') {
        this.index = '2-1'
        this.breadcrumbItem = '授信管理'
      } else if (
        this.$route.path == '/projectBusinessDetails' ||
        this.$route.path == '/projectPledgeApproveDetalis' ||
        this.$route.path == '/projectApprovePledgeDetails' ||
        this.$route.path == '/projectApproveEasypasteDetails' ||
        this.$route.path == '/projectDiscountDetails' ||
        this.$route.path == '/projectBorderDetailsGsbh' ||
        this.$route.path == '/regularProjectGsbh' ||
        this.$route.path == '/projectGuaranteeDetails' ||
        this.$route.path == '/projectBorderDetails' ||
        this.$route.path == '/projectGslyBzbx' ||
        this.$route.path == '/projectBorderDetailsSxb' ||
        this.$route.path == '/regularProjectSxb' ||
        this.$route.path == '/projectGongHuoDaiTG' ||
        this.$route.path == '/projectGongHuoDaiJJ' ||
        this.$route.path == '/projectSPBT' ||
        this.$route.path == '/newProject' ||
        this.$route.path == '/projectChanYeEDaiTG' ||
        this.$route.path == '/projectChanYeEDaiJJ' ||
        this.$route.path == '/projectShangLian' ||
        this.$route.path == '/projectBaoLiRongZiDetails' ||
        this.$route.path == '/projectSjghdDetails' ||
        this.$route.path == '/projectGCLYBH' ||
        this.$route.path == '/projectPHSZD' ||
        this.$route.path == '/projectCYPHD' ||
        this.$route.path == '/projectPuHui' ||
        this.$route.path == '/projectZBD'
      ) {
        this.index = '2-1'
        this.breadcrumbItem = '授信管理'
        this.shouXinitem = true
      } else if (this.$route.path == '/projectKuaJing') {
        this.index = '2-2'
        this.breadcrumbItem = '用信管理'
      } else if (
        this.$route.path == '/yongXinBaoLiRongZiDetails' ||
        this.$route.path == '/yongXinGongHuoDaiDetails' ||
        this.$route.path == '/yongXinChanYeEDai' ||
        this.$route.path == '/yongXinZBD' ||
        this.$route.path == '/projectYXSPBT' ||
        this.$route.path == '/GongChengQiXinDaiYongXinDetails' ||
        this.$route.path == '/FuKuanChengNuoYongXinDetails'
      ) {
        this.index = '2-2'
        this.breadcrumbItem = '用信管理'
        this.YongXinItem = true
      } else if (
        this.$route.path == '/authentication' ||
        this.$route.path == '/authentication1' ||
        this.$route.path == '/authentication2' ||
        this.$route.path == '/authentication3' ||
        this.$route.path == '/authentication4' ||
        this.$route.path == '/platform'
      ) {
        this.index = '1-1'
        this.breadcrumbItem = '平台认证'
      } else if (this.$route.path == '/myReport') {
        this.index = '3-1'
        this.breadcrumbItem = '商务信用报告'
      } else if (this.$route.path == '/sweepRecord') {
        this.index = '3-2'
        this.breadcrumbItem = '企业风险扫描'
      }
    },
    // 返回上一页
    goBack() {
      this.$router.push('/')
      setTimeout(() => {
        this.$router.go(0)
      }, 50)
    },
    goTime() {
      setTimeout(() => {
        this.$router.go(0)
      }, 100)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  box-sizing: border-box;
  padding-bottom: 0.5208rem;
  position: relative;
  width: 10rem;
  background-color: rgb(242, 244, 247);
  .matter {
    width: 10rem;
    height: 1.5625rem;
    background: url(@/assets/image/组152.png);
    background-size: 100% 100%;
    .f1 {
      display: flex;
      width: 8.4375rem;
    }
  }
  .boxs {
    margin: 0 auto;
    margin-top: -1.1rem;
    width: 8.4375rem;
    // 面包屑
    .breadcrumb {
      display: flex;
      align-items: center;
      height: 0.3958rem;
      font-size: 0.0833rem;
      .icon {
        margin: 0 0.0521rem 0 0.0208rem;
      }
      .span {
        font-size: 0.0833rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #999999;
      }
      img {
        width: 0.0938rem;
        height: 0.0938rem;
        margin-right: 0.026rem;
      }
    }
    // 返回上一页
    .back {
      display: flex;
      align-items: center;
      font-size: 0.0833rem;
      color: #3f6ef2;
      text-decoration: underline;
      user-select: none;
      cursor: pointer;
      margin-left: 0.1302rem;
      img {
        margin-right: 0.026rem;
        width: 0.0833rem;
      }
    }
    .top {
      box-sizing: border-box;
      padding-right: 0.4167rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;
      width: 8.4375rem;
      height: 0.4167rem;
      margin-bottom: 0.1042rem;
      background: #fff;
      .topLeft {
        box-sizing: border-box;
        padding-left: 0.4167rem;
        display: flex;
        align-items: center;
        .userinfo {
          display: flex;
          flex-direction: column;
          font-size: 0.0938rem;
          color: #9f9b97;
        }
        img {
          width: 0.2604rem;
          margin-right: 0.0521rem;
        }
      }
    }
    .content {
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      width: 8.4375rem;
      // height: 1060px;
      .content_left {
        box-sizing: border-box;
        padding: 0 0.0573rem;
        width: 1.4375rem;
        height: 3.0729rem;
        background: #ffffff;
        .userinfo_box {
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 0.2969rem;
            margin-right: 0.0521rem;
          }
          .userinfo {
            display: flex;
            flex-direction: column;
            font-size: 0.0938rem;
            color: #757da2;
          }
        }
        .menu {
          margin-top: 0.1042rem;
          .el-menu-vertical-demo {
            img {
              width: 0.0938rem;
              margin-right: 0.1042rem;
            }
          }
        }
      }
      .content_right {
        width: 6.8958rem;
        // height: 1060px;
        background-color: #fff;
        .content_right_top {
          display: flex;
          align-items: center;
          width: 6.8958rem;
          height: 0.3958rem;
          background-color: rgb(242, 244, 247);
          // 面包屑
          .breadcrumb {
            display: flex;
            align-items: center;
            height: 0.125rem;
            font-size: 0.0833rem;
            color: #666666;
            .span {
              font-size: 0.0833rem;
              font-weight: 400;
              color: #666666;
            }
            img {
              width: 0.0938rem;
              height: 0.0938rem;
              margin-right: 0.026rem;
            }
          }
        }
        .content_right_bottom {
          width: 6.8958rem;
          height: 1060px;
          background-color: #fff;
        }
      }
    }
  }
}
::v-deep .el-submenu__title {
  font-size: 0.0938rem;
  padding: 0 0.1302rem !important;
}
::v-deep .el-menu-item {
  color: #999;
  font-size: 0.0938rem;
}
.el-menu-item.is-active {
  color: #3f6ef2;
  font-size: 0.0938rem;
}
::v-deep .el-submenu .el-menu-item {
  padding: 0 0.3177rem !important;
}
::v-deep .el-menu {
  border-right: 0rem;
}
::v-deep .el-submenu .el-menu-item {
  min-width: 130px;
  height: 0.3125rem;
  line-height: 0.3125rem;
}
::v-deep .el-submenu__title {
  height: 0.2917rem;
  line-height: 0.2917rem;
}
</style>
